"use client"
import Link from "next/link";
import {RiPhoneLine} from "react-icons/ri";
import {usePathname, useRouter} from "next/navigation";
import {clsx} from "clsx";
import Logo from "@/components/Logo";
import {useEffect, useState} from "react";

const navLinks = [
    {
        label: '首页',
        link: '/'
    },
    {
        label: '民生动态',
        link: '/news'
    },
    {
        label: '自然美景',
        link: '/sights'
    },
    {
        label: '特色与产业',
        link: '/specialty'
    },
    {
        label: '关于',
        link: '/about'
    },
]
export default function Header() {
    const path = usePathname()
    const isCurrent = (link: string): boolean => {
        if (link === '/') {
            return path === '/';
        }
        return path.startsWith(link)


    }

    const [levelTop, setLevelTop] = useState(false)
    const handleScroll = () => {
        if (window.scrollY > 20) {
            setLevelTop(true);
        } else {
            setLevelTop(false);
        }
    };
    const router = useRouter()
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);
    return (
        <>
            <header className={clsx("h-[64px] px-2 flex items-center sticky top-0 z-50",levelTop&&"bg-white text-black")}>
                <div className={"max-w-7xl w-full mx-auto flex items-center gap-x-4 justify-between"}>
                    <div className={"flex items-center gap-x-4 justify-start"}>
                        <div className={"flex items-center gap-x-1"}>
                            <Logo size={32} className={"mb-1"} />
                            <div className={"flex flex-col"}>
                                <span  className={"font-bold text-sm"}>寺山镇</span>
                                <span  className={"text-[8px]"}>SISHANZHEN</span>
                            </div>
                        </div>
                        <nav className={"items-center gap-x-3 hidden md:flex"}>
                            {
                                navLinks.map((item, index) =>
                                    <ul key={index}>
                                        <li className={"list-none"}>
                                            <Link
                                                href={item.link}
                                                className={clsx("text:bg-green-500 transition-all h-[64px] px-4", isCurrent(item.link) && "font-bold")}
                                            >{item.label}</Link></li>
                                    </ul>
                                )
                            }
                        </nav>
                    </div>
                    <div className={"flex items-center"}>
                        {/*<ThemeSwitch />*/}
                        <div className={"cursor-pointer rounded-full px-3 py-1 bg-black flex items-center gap-x-1 text-white cup"}>
                            <RiPhoneLine/>
                            <span>镇联系电话</span>
                        </div>
                    </div>
                </div>
            </header>
        </>
    )
}